<!-- 修改数据, 且有些数据无法修改, 例如 原始的固定列数据无法修改 -->
<!-- 删除数据, 且有些数据无法删除, 例如 原始数据-->
<!-- 以 isOld 为原始数据, params.isEditDisabled 为不可修改数据, 进行功能搭建 -->

<template>
  <BaseVxeGrid ref="vxeGridRef" :gridOptions="gridOptions" :gridEvents="gridEvents" v-on="gridEvents">
    <template #header>
      <button @click="addLine">新增</button>
    </template>
    <template #action="{ row }">
      <button>clickMe_{{ row.special_msg }}</button>
    </template>
  </BaseVxeGrid>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { VxeGridListeners, VxeGridProps } from 'vxe-table'
import BaseVxeGrid from '../components/BaseVxeGrid.vue'
import type { ComponentExposed } from 'vue-component-type-helpers'
import { ElMessage } from 'element-plus'

interface RowVO {
  storage: string
  drug_code: string
  drug_spec: string
  drug_id: string
  spec_alias: string
  drug_name: string
  trade_name: string
  factory: string
  factory_alias: string
  drug_units: string
  dose_per_unit: number
  dose_units: string
  drug_form: string
  retail_price: number
  input_code: string
  pack_first_day: boolean
  dispensing_property: string

  // 为新增字段
  isOld?: boolean
}

const vxeGridRef = ref<ComponentExposed<typeof BaseVxeGrid<RowVO>>>();

// https://vxetable.cn/#/component/grid/checkbox/range 滑动复选框多选
const gridOptions = ref<VxeGridProps<RowVO>>({
  keyboardConfig: {
    isEdit: true,
    isArrow: true,
    isEnter: true,
    isTab: true,
    isDel: true,
    isBack: true,
    isEsc: true,
    editMethod({ $table, row, column }) {
      // https://vxetable.cn/#/component/grid/keyboard/editMethod 第二个 按键编辑表格
      // 清空值
      // if (column.field) {
      //   row[column.field] = ''
      // }
      // 激活编辑状态
      $table.setEditCell(row, column)
    },
  },
  editConfig: {
    trigger: 'dblclick',
    mode: 'cell',
    showStatus: true,
    beforeEditMethod({ row, column }) {
      // 是老数据, 且不允许修改
      if (row?.isOld && column.params?.isEditDisabled)
        return false;
      return true;
    }
  },
  columns: [
    { type: 'checkbox', fixed: 'left' },
    { minWidth: '100px', title: '序号', type: 'seq', fixed: 'left' },
    {
      minWidth: '100px', editRender: { name: 'input' }, field: 'drug_name', title: '药品名称', fixed: 'left', sortable: true, params: { isEditDisabled: true }
    },
    {
      minWidth: '100px', editRender: { name: 'input' }, field: 'drug_spec', title: '药品规格', fixed: 'left', params: { isEditDisabled: true }
    },
    {
      minWidth: '100px', editRender: { name: 'input' }, field: 'factory', title: '生产厂商', fixed: 'left', params: { isEditDisabled: true }
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'storage', title: '库存位置' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'drug_code', title: '药品编码' },
    {
      minWidth: '100px', field: 'pack_first_day', title: '首日打包', cellRender: { name: 'VxeSwitch' }, // switch 开关组件
    },
    {
      minWidth: '100px', editRender: {
        name: 'select', options: [
          { label: '=请选择=', value: '' },
          { label: '大输液', value: 'dsy' },
          { label: '针剂', value: 'zj' },
        ],
      }, field: 'dispensing_property', title: '摆药类型',
    },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'spec_alias', title: '规格别名' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'factory_alias', title: '厂商别名' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'drug_units', title: '单位' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'dose_per_unit', title: '单位剂量' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'dose_units', title: '剂量单位' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'drug_form', title: '剂型' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'retail_price', title: '零售价' },
    { minWidth: '100px', editRender: { name: 'input' }, field: 'input_code', title: '输入码' },
  ],
  data: [],
  menuConfig: {
    enabled: true,
    header: {},
    trigger: "cell",
    body: {
      options: [
        [
          {
            code: 'delete',
            name: '删除选中行',
            prefixConfig: { icon: 'vxe-icon-delete' },
            visible: true,
            disabled: false,
          },
        ],
      ],
    },
    footer: {},
  },
})

const dataBack = ref<RowVO[]>([])
function queryInit() {
  // 从接口获取数据
  fetch('https://mock.presstime.cn/mock/66f26d8d0b20e0d6a1d5a491/test/getDrugList', {
    headers: {
      'content-type': 'application/json',
    },
    method: 'GET',
  })
    .then((res) => res.json())
    .then((res) => {
      const tmpData = [...res.result.items].map(m => ({ ...m, isOld: true })).slice(0, 3)
      dataBack.value = tmpData
      gridOptions.value.data = tmpData
    })
}
queryInit()


const addLine = () => {
  console.log(`output->gridOptions.value.data`, gridOptions.value.data)
  const $grid = vxeGridRef.value?.getVxeGridRef();
  $grid?.insertAt({
    storage: "",
    drug_code: "",
    drug_spec: "",
    drug_id: "",
    spec_alias: "",
    drug_name: "",
    trade_name: "",
    factory: "",
    factory_alias: "",
    drug_units: "",
    dose_per_unit: 0,
    dose_units: "",
    drug_form: "",
    retail_price: 0,
    input_code: "",
    pack_first_day: false,
    dispensing_property: "",
  }, -1);
}

const gridEvents: VxeGridListeners<RowVO> = {
  // 禁止行编辑
  editDisabled({ row, column }) {
    console.log('禁止编辑', column.field, row)
  },
  sortChange({ sortList }) {
    console.info(sortList.map((item) => `${item.field},${item.order}`).join('; '))
  },
  menuClick({ menu, row, column }) {
    console.log('菜单点击', menu.code, row, column)
    console.log(`output->menu.code == "delete" && !row.isOld`, menu.code == "delete" && !row.isOld)
    if (menu.code == "delete") {
      if (!row.isOld) {
        const $grid = vxeGridRef.value?.getVxeGridRef();
        $grid?.remove(row);
        // $grid?.clearEdit();
        console.log(`output->row`, row)
      }
      else ElMessage.warning('原始数据不可删除！')
    }
  },
}
</script>

<style scoped></style>
